<template>
      <div class="input">
      <div class="add-form">
         <el-dialog :visible.sync="value" width="20%" :title="title" :before-close="handleClose">
            <el-form :rules="rules" label-position="30px" class="demo-ruleForm" ref="form" :model="form">
            <el-form-item label="所属学科" :label-width="formLabelWidth">
              <el-select  placeholder="请选择" v-model="form.subjectID">
                <el-option :label="channel.label" :value="channel.value" v-for="(channel,idx) in channels" :key="idx"></el-option>
              </el-select>
            </el-form-item>
              <el-form-item label="目录名称" prop="directoryName" :label-width="formLabelWidth">
              <el-input v-model="form.directoryName"></el-input>
            </el-form-item>
          </el-form>
        <div slot="footer" class="dialog-footer">
         <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleChang" >确 定</el-button>
      </div>
    </el-dialog>
  </div>
   </div>
</template>

<script>
import { add, update, detail } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  name: 'directorys-add',
  props: ['value', 'id'],
  data () {
    return {
      // 验证
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
        ]
      },
      title: '',
      form: {
        directoryName: this.directoryname,
        subjectID: this.subjectid,
        id: null
      },
      formLabelWidth: '120px',
      channels: []
    }
  },
  created () {
    this.discipline()
    this.open()
  },
  methods: {
    // 传递事件刷新页面
    emit () {
      this.$listeners.init && this.$emit('init')
    },
    // 打开对话框判断
    open () {
      if (this.id) {
        this.title = '编辑目录'
        this.dataDetail()
      } else {
        this.title = '新增目录'
      }
    },
    // 新增目录
    async dataFormSub () {
      await add({
        directoryName: this.form.directoryName,
        subjectID: this.form.subjectID
      }).then(res => {
        this.emit()
        this.$emit('input', false)
        this.$message.success('新增目录成功')
      }).catch(err => {
        this.$message.error('新增目录失败')
        console.log(err)
      })
    },
    // 获取编辑目录回填
    async dataDetail () {
      try {
        const res = await detail({
          id: this.id
        })
        console.log(res)
        this.form.directoryName = res.data.directoryName
        this.form.subjectID = res.data.subjectID
      } catch (err) {
        this.$message.error('编辑目录失败')
      }
    },
    // 编辑后点确定发送请求
    async dataUpdate () {
      try {
        const res = await update({
          directoryName: this.form.directoryName,
          subjectID: this.form.subjectID,
          id: this.id
        })
        console.log(res)
        this.$emit('input', false)
        this.emit()
        this.$message.success('编辑目录成功')
      } catch (err) {
        this.$message.error('编辑目录失败')
      }
    },
    // 重置表单
    reset () {
      this.form = {
        directoryName: '',
        subjectID: ''
      }
    },
    // 获取下拉框数据
    async discipline () {
      try {
        const res = await simple({})
        this.channels = res.data
      } catch (err) {
        this.$message.error('错了')
      }
    },
    // 点击取消和X
    handleClose () {
      this.$emit('input', false)
    },
    // 新增和编辑的确定按钮
    handleChang () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const res = { ...this.form }
          console.log(res)
          if (this.id) {
            // 编辑
            this.dataUpdate()
            this.reset()
          } else {
            // 新增
            this.dataFormSub()
            this.reset()
          }
        } else {
          this.$message.error('目录名称未填')
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
